<template>
    <div>
     
        <p>响应式数据:数据变了,视图自动更新</p>
        <p>怎样让数据显示在页面中用的是html模板语法----{{ }}差值语法+指令</p>
        <p>{{ num }}</p>
        <p>{{ str }}</p>
        <p>{{ p }}</p>
        <input  type="button" value="num变化" v-on:click="changgeNum"/>
        <input  type="button" value="num变化" v-on:click="changgeNum"/>
        <input  type="button" value="str变化" @click="changgeStr"/>
        <input  type="button" value="p变化" @click="changgeP"/>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
//通过ref包裹起来的数据就是响应式数据 ref一般适用于基本类型的数据 数值 布尔 字符串 ... 都是基本类型
//let 是局部变量
//v-on触发事件 v-on的简介 @
let num=ref(100);
let str=ref("好好学习");
let p=reactive({
    name:"张三",
    age:20,
    frames:["tom","陈子旭","刘娇菡"]
})
const changgeNum=()=>{
    num.value++;
    console.log(num.value);
}
const changgeStr=()=>{
    str.value="天天向上";
}
const changgeP=()=>{
    p.name="王熙"
    p.age=100
    p.frames[0]="李正阳"
    p.frames[1]="王焕灵"
    p.frames[2]="陈思宇"
}
</script>

<style scoped>

</style>